import React, { Component } from 'react'
import Header from '../../components/header/header'
import { Form, Input, Button, Toast } from "antd-mobile"
import img from "../../assets/img/pic_logo_orange.png"
import "./register.less"
import { connect } from 'react-redux'
import { actions, getUser } from '../../store/modules/register'
import { bindActionCreators } from 'redux'

class register extends Component {
    render() {
        let { user,register:{changeUser,reqregister} } = this.props
        return (
            <div className='register'>
                <Header text="注册" back></Header>
                <Form layout='horizontal'>
                    <img src={img} alt="" />
                    <Form.Item label='手机号' name='phone'>
                        <Input placeholder='请输入手机号' onChange={(e) =>changeUser("phone",e)} clearable />
                    </Form.Item>
                    <Form.Item label='用户名' name='nickname'>
                        <Input placeholder='请输入用户名' onChange={(e) =>changeUser("nickname",e)} clearable />
                    </Form.Item>
                    <Form.Item label='密码' name='password'>
                        <Input placeholder='请输入密码' onChange={(e) =>changeUser("password",e)} clearable type='password' />
                    </Form.Item>
                    <Button block color="primary" size="large" onClick={()=>reqregister(this.props.history.push)}>
                        注册
                    </Button>
                </Form>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    user: getUser(state)
})
const mapDispatchToProps = (dispatch) => {
    return {
        register: bindActionCreators(actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(register)